<template>
  <view class="feast">
    <!-- 重新定义顶部状态栏和导航栏 -->
    <view class="top_box" :style="{'height ': statusBarHeight + 100 + 'px'}">
      <!-- 状态栏高度 -->
      <view class="status-bar" :style="{'height': statusBarHeight + 'px'}"></view>
      <view class="nav_bar">
        <view class="nva_bar_content" >
          <!--<view class="nav_bar_content_left" >{{tabTitle}}</view>-->
          <view class="nav_bar_title" >{{NavTitle}}</view>
        </view>
      </view>
      <!--搜索框-->
      <view class="search_box">
        <view @click="feastSearchFun" class="search_content">
          <view class="search_button">搜 索</view>
          <u-search
              shape="round"
              :show-action="false"
              placeholder="请输入店铺名称..."
              :clearable="true"
              height="74"
              :disabled="true"
              :class="'search_input' + (ifSearchText ? ' search_input_active' : '')"
          />
        </view>
      </view>
    </view>
    <!--主题内容-->
    <view class="feast_box" :style="{'height ': windowHeight - headerHeight + 'px'}">
      <scroll-view
          :scroll-y="true"
          :refresher-enabled="true"
          @refresherrefresh="onrefresherrefresh"
          :refresher-triggered="isTriggered"
          refresher-default-style="none"
          lower-threshold="30"
          @scrolltolower="onScrolltolower"
          style="height: 100%"
      >
        <!--feast navbar-->
        <view class="feast_navbar">
          <view class="feast_navbar_item" v-for="(item, index) in catelist" :key="index" @click="navbarChange(item, index)">
            <image class="nav-icon" :src="item.image"></image>
            <view class="menu_text" :class="[index===current?'menu_text_click':'menu_text_no_click']">{{ item.name }}</view>
          </view>
        </view>
        <!--套餐列表-->
        <view class="feast_list">
          <!-- 加载中提示 -->
          <view class="lanjiazai_wrap" v-if="skeletonLoading">
            <view class="lanjiazai_item">
              <view class="loading_icon">
                <image :src="BestImgUrl + '/index/logo_loading.gif'" class="loading_gif"></image>
              </view>
              <view class="tag">加载中...</view>
            </view>
          </view>
          <view v-if="isLogin">
            <!--提示用户登录-->
            <view class="login_box" style="text-align: center;padding: 200rpx 0;">
              <image :src="imgurlBwc + 'shop/shop_logo.png'" style="width: 120rpx;height: 120rpx"></image>
              <view style="padding: 30rpx 0;">您还未登录，请先登录</view>
              <navigator url="/pages/login/login" open-type="navigate" hover-class="none">
                <view class="login_btn" style="color: #FF530E;font-size: 28rpx;">立即登录</view>
              </navigator>
            </view>
          </view>
          <view v-else-if="isLogin == false">
            <view class="shops_list_wrap" v-if="shopsLists.length != 0">
              <view v-for="(items,index) in shopsLists" :key="index" class="shops_list">
                <!--<shop-item v-if="items.shop_type === 1" :items="items"></shop-item>-->
                <shops-gf-list :items="items"></shops-gf-list>
              </view>
              <view class="chudijiazai">
                <u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" margin-top="30"
                            margin-bottom="10"/>
                <view v-if="Bottomingrefresh == true" class="Bottomingrefresh" @click="RefreshBtn()">立即刷新</view>
              </view>
            </view>
            <!-- 暂无店铺提示 -->
            <view v-else-if="shopsLists.length == 0 && failTimeOutShow == false" class="noData_box shop_list_wrap_height">
              <image :src="BestImgUrl + '/index/noData.png'"></image>
              <view v-if="Address == '正在定位...'">正在定位...</view>
              <view v-else>暂无店铺</view>
            </view>
            <!-- 网络错误提示 -->
            <view v-else-if="shopsLists.length == 0 && failTimeOutShow == true" class="noData_box shop_list_wrap_height">
              <image src="/static/images/Frame33412.png"></image>
              <view class="timeOut">
                <view>网络好像出问题了~</view>
                <view @click="refurbish()">立即刷新</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import ShopsGfList from "@/pages/feast/components/shops-gf-list.vue";

const app = getApp();
export default {
  components: {ShopsGfList},
  data() {
    return {
      imgurlBwc: app.globalData.imgurlBwc,
      BestImgUrl: app.globalData.imgurl,
      NavTitle: '美团官返霸王餐', //页面标题
      tabTitle: '精选',
      meituanPvId: '',// 美团PVID
      statusBarHeight: 0, //状态栏高度
      windowHeight: '', // 获取屏幕高度
      headerHeight: 0,// 获取头部高度
      //分类列表
      catelist: [
          {
            id: 1,
            name: '正餐',
            image: app.globalData.imgurlBwc + 'feast/feast_navbar_icon01.png',
            code: 1,
          },
          {
            id: 2,
            name: '饮品',
            image: app.globalData.imgurlBwc + 'feast/feast_navbar_icon02.png',
            code: 2,
          },
          {
            id: 3,
            name: '快餐',
            image: app.globalData.imgurlBwc + 'feast/feast_navbar_icon03.png',
            code: 3,
          },
          {
            id: 4,
            name: '糕点甜品',
            image: app.globalData.imgurlBwc + 'feast/feast_navbar_icon04.png',
            code: 4,
          },
          {
            id: 5,
            name: '鲜花绿植',
            image: app.globalData.imgurlBwc + 'feast/feast_navbar_icon05.png',
            code: 5,
          },
          {
            id: 6,
            name: '水果',
            image: app.globalData.imgurlBwc + 'feast/feast_navbar_icon06.png',
            code: 6,
          },
          {
            id: 7,
            name: '成人用品',
            image: app.globalData.imgurlBwc + 'feast/feast_navbar_icon07.png',
            code: 7,
          },
      ],
      //套餐列表
      shopsLists: [],
      pageSize: '',
      pageNum: 10,
      category_id: '',
      skeletonLoading: true, //加载中图片
      Bottomingrefresh: false,
      loadingstatus: 'loading',
      loadText: {
        loadmore: '轻轻上拉',
        loading: '加载中...',
        nomore: '没有更多了'
      },
      failTimeOutShow: false,
      zanwuloc: true,
      isLogin: false, // 是否登录
      isTriggered: false,// 触发下拉刷新
    };
  },
  onLoad() {
    // 顶部安全区域高度
    this.statusBarHeight = uni.getWindowInfo().statusBarHeight
    // 获取屏幕高度
    this.windowHeight = uni.getWindowInfo().windowHeight
    // 获取头部高度
    uni.createSelectorQuery().select('.top_box').boundingClientRect(rect => {
      //console.log('height：', rect); // 输出元素的高度
      this.headerHeight = Number('height' in rect ? rect.height : '')
    }).exec();
    // 判断用户是否登录
    this.getUserInfo()
    // 分类列表数据加载
    this.getCategoryFun();
    // 套餐列表加载
    this.getShopsList();
  },
  onShow() {
  },
  methods: {
    // 导航点击事件
    navbarChange(item, index){
      let that = this
      console.log('分类点击事件', item, index)
      that.category_id = item.code
      that.loadingstatus = 'nomore'
      that.Bottomingrefresh = false
      that.failTimeOutShow = false
      that.skeletonLoading = true
      that.pageSize = ""
      setTimeout(() => {
        that.getUserInfo()
        that.getShopsList()
      }, 1000)
    },
    // 下拉刷新
    onrefresherrefresh(){
      let that = this
      console.log('已到顶部');
      that.skeletonLoading = true
      // 开启 下拉刷新
      that.isTriggered = true
      that.pageSize = ''
      that.pageNum = 10
      // 下拉刷新清空数据
      that.shopsLists = []
      setTimeout(function () {
        that.getShopsList()
        uni.stopPullDownRefresh();
        // 关闭 下拉刷新
        that.isTriggered = false
      }, 1500);
    },
    //触底加载
    onScrolltolower() {
      let that = this
      that.loadText.nomore = '没有更多了'
      that.Bottomingrefresh = false
      that.loadingstatus = 'loading';
      if (that.zanwuloc == true) {
        setTimeout(function () {
          console.log('已滚动到底部');
          that.pageSize
          that.pageNum = 10
          that.getShopsList()
          uni.hideNavigationBarLoading()
        }, 500);
      } else {
        setTimeout(function () {
          uni.hideNavigationBarLoading()
        }, 500);
      }
    },
    // 用户登录事件
    getUserInfo() {
      let that = this;
      // 判断用户是否登录
      let token = uni.getStorageSync('token')
      if (!token) {
        uni.showModal({
          title: '提示',
          content: '您还未登录，登录后才能在美团官返霸王餐下单',
          confirmColor: '#FF4910',
          confirmText: '去登录',
          success: function (res) {
            if (res.confirm) {
              // #ifdef APP-PLUS
              uni.navigateTo({
                url: '/subpackageB/pages/newAppLogin/newAppLogin'
              })
              // #endif

              // #ifdef H5
              uni.switchTab({
                url: '/pages/me/me'
              })
              // #endif

              // #ifdef MP-WEIXIN
              uni.navigateTo({
                url: '/pages/login/login'
              })
              // #endif

            } else if (res.cancel) {
              that.isLogin = true
              that.skeletonLoading = false
              console.log('用户点击取消');
            }
          }
        });
      } else {
        that.isLogin = false
      }
    },
    // 获取分类列表数据
    getCategoryFun() {
      let that = this;
      that.$api.GetOfficialReturnCategoryAPI().then(res => {
        if (res.data.code === 200){
          that.catelist = res.data.result
        }
      })
    },
    // 套餐列表数据
    getShopsList() {
      let that = this;
      let lat = uni.getStorageSync('lat')
      let lon = uni.getStorageSync('lng')
      let CityName = uni.getStorageSync('CityName')
      let Province = uni.getStorageSync('Province')
      let userPhone = uni.getStorageSync('userinfo').username
      that.$api.GetOfficialReturnShopListAPI({
      // that.$api.getPackageList({
        pagePvId: that.pageSize,
        limit: that.pageNum,
        // province: Province,
        // city: CityName,
        lat: lat,
        lon: lon,
        mt_mobile: userPhone,
        searchWord: '',
        sortType: 1,
        categoryTypeList: [that.category_id || 0],
      }).then(res => {
        console.log('套餐列表', res.data.result)
        // 本地缓存美团ID
        uni.setStorageSync('meituanPvId', res.data.result.meituanPvId)
        if (res.data.code === 200){
          that.pageSize = res.data.result.pagePvId
          that.loadText.nomore = '没有更多了'
          that.Bottomingrefresh = false
          if (that.pageSize != '') {
            if (res.data.result.poiList.length != 0) {
              that.loadingstatus = 'loading';
              that.shopsLists = that.shopsLists.concat(res.data.result.poiList)
            } else {
              that.loadingstatus = 'nomore'
            }
          } else {
            that.shopsLists = res.data.result.poiList
            that.loadingstatus = 'nomore'
          }
          console.log('套餐列表', that.shopsLists)
          that.skeletonLoading = false
        }
      }).catch(err => {
        if (!err.data) {
          //不存在就是访问超时或者接口错误
          //console.log('请求错误或请求超时', err.errMsg)
          that.skeletonLoading = false
          if (that.loadingstatus == 'loading') {
            that.loadingstatus = 'nomore'
            that.loadText.nomore = '网络好像出问题了~'
            that.Bottomingrefresh = true
          } else {
            that.shopsLists = []
            that.loadingstatus = 'loading'
            that.loadText.nomore = '没有更多了'
            that.Bottomingrefresh = false
            that.failTimeOutShow = true
          }
        } else {
          uni.showToast({
            title: err.data.msg,
            icon: 'none',
            duration: 2000
          });
        }
      })
    },
    // 跳转搜索页面
    feastSearchFun(){
      uni.navigateTo({
        url: '/pages/feast/feast_search'
      });
    },
    // 立即刷新
    RefreshBtn(){
      let that = this;
      that.getShopsList()
    },
    refurbish(){
      let that = this;
      that.getShopsList()
    },
  }
}
</script>

<style lang="scss">
  page{
    height: 100%;
    background-color: #FFFFFF;
  }
  .feast{
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    //自定义导航栏css
    .top_box {
      position: relative;
      z-index: 10;
      background: linear-gradient( 180deg, #F4D513 0%, #FAE437 98%);
      .status-bar {
        height: var(--status-bar-height) + 'px';
      }
      .nav_bar {
        height: 80rpx;
        line-height: 80rpx;
        .nva_bar_content{
          display: flex;
          text-align: center;
          align-items: center;
          .nav_bar_content_left {
            width: 80rpx;
            height: 40rpx;
            line-height: 40rpx;
            display: inline-block;
            margin-right: 10rpx;
            font-size: 24rpx;
            color: #FFFFFF;
            background: #FE2B3C;
            border-radius: 10rpx;
          }
          .nav_bar_title {
            flex: 1;
            font-size: 32rpx;
            font-weight: bold;
            color: #3D3D3D;
          }
          .nav_bar_content_right {
            display: inline-block;
            color: #FF5F15;
            font-size: 32rpx;
            font-weight: bold;
          }
        }
        image {
          width: 56rpx;
          height: 56rpx;
        }
      }
      // 搜索css
      .search_box {
        height: 120rpx;
        padding: 20rpx;
        .search_content{
          position: relative;
          .search_input {
            flex: 1;
            width: 100%;
            height: 74rpx;
            line-height: 74rpx;
          }
          .search_button{
            background: #F9D90E;
            width: 120rpx;
            height: 60rpx;
            border-radius: 40rpx;
            color: white;
            font-size: 28rpx;
            text-align: center;
            line-height: 60rpx;
            position: absolute;
            right: 8rpx;
            top: 8rpx;
            transition: all 1s ease;
          }

        }

      }
    }
    /* 主题内容css */
    .feast_box{
      flex: 1;
      overflow-y: auto;
      /* feast_navbar css */
      .feast_navbar{
        height: 300rpx;
        padding: 20rpx;
        display: flex;
        flex-wrap: wrap;
        .feast_navbar_item{
          width: 20%;
          height: 140rpx;
          background: #FFFFFF;
          text-align: center;
          .nav-icon{
            width: 96rpx;
            height: 96rpx;
          }
          .menu_text{
            font-size: 24rpx;
            color: #3D3D3D;
            line-height: 40rpx;
            display: block;
          }
        }
      }
      /* 店铺列表css */
      .feast_list{
        height: calc(100% - 300rpx);
        padding: 0 20rpx;
        background: #F5F5F5;
        .shops_list_wrap{
          padding-top: 20rpx;
          .shops_list {
            background-color: #ffffff;
            border-radius: 20rpx;
            margin-bottom: 20rpx;
          }
        }
      }
    }
  }
  /* 懒加载css */
  .lanjiazai_wrap {
    position: relative;
    z-index: 10000;
    height: calc(100vh);
    text-align: center;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: #999;
    padding-top: 100rpx;
  }

  .tag {
    margin-top: 8rpx;
    font-size: 24rpx;
  }

  .loading_icon {
    width: 120rpx;
    height: 120rpx;
  }

  .loading_gif {
    width: 120rpx;
    height: 120rpx;
  }

  .lanjiazai_item {
    text-align: center;
  }

  .shop_list_wrap_height {
    width: 100%;
    position: relative;
    z-index: 4;
  }

  .noData_box {
    margin-top: 0;
    text-align: center;
    color: #999;
  }

  .noData_box image {
    width: 240rpx;
    height: 240rpx;
  }

  .timeOut {
    font-size: 12px;
    color: #666;
    margin: 0px 0px 7px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .timeOut view:nth-child(2) {
    color: #00acfd;
    padding-left: 10rpx;
  }

</style>
